<!--  -->
<template>
  <!-- 显示区域 -->
  <div class="wrapper" :style="height" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: {
    height: {
      type: String,
      default: "107vw",
    },
  },
  data() {
    return {
      scroll: "",
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      this.initScrool();
      //$refs绑定元素
      // if (!this.scroll) {
      //   this.scroll = new BScroll(this.$refs.wrapper, {
      //     //插件配置参数，有很多
      //     //开启点击事件 默认为false
      //     click: true,
      //     //上拉加载
      //     pullUpLoad: true,
      //     //touchend:true
      //   });
      // this.scroll.on("pullingUp", () => {
      //   this.$emit("up-dolnshoplist")
      //    //console.log("上拉加载")
      //   this.scroll.refresh();
      // });
      //}
    });
  },
  methods: {
    initScrool() {
      if (!this.scroll) {
        //console.log("meiyou")
        this.scroll = new BScroll(this.$refs.wrapper, {
          //插件配置参数，有很多
          //开启点击事件 默认为false
          click: true,
          //上拉加载
          pullUpLoad: {
            threshold: 50, // 当下拉到超过顶部 30px 时，
          },
        });
        this.upLoadList();
      } else {
        this.scroll.refresh();
      }
    },
    upLoadList() {
      this.scroll.on("pullingUp", () => {
        //
        //       setTimeout(()=>{
        this.$emit("up-dolnshoplist");
        //
        this.scroll.finishPullUp();

        //     });
      });
    },
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/index.less";
/* @import url(); 引入css类 */
.wrapper {
  // position: absolute;
  height: 1600 * @vw;
  top: 670 * @vw;
  bottom: 50 * @vw;
  /*关键*/
  overflow: hidden;
  z-index: 1;
}
</style>